<template>
  <div>
    <h1 style="margin: 1% 0px 1% 1%">问题管理</h1>
    <div class="NewDiv">
      <div class="Returns">
        <hr style="margin: 0 auto; width: 100%" />
        <el-button
          class="iconfont icon-fanhui"
          style="margin-left: 1%"
          @click="goEmerson"
          >返回</el-button
        >
      </div>

      <div class="inputcontent">
        <div class="inputdiv">
          <h4>类型</h4>
          <el-select v-model="addData" clearable placeholder="常见问题">
            <el-option label="常见问题" value="beijing"> </el-option>
            <el-option label="业务问答" value="beijing"> </el-option>
          </el-select>
        </div>
        <div class="inputdiv">
          <h4>状态</h4>
          <el-select v-model="addData" clearable placeholder="有效">
            <el-option label="有效" value="beijing"> </el-option>
            <el-option label="无效" value="beijing"> </el-option>
          </el-select>
        </div>

        <div class="inputdiv">
          <h4>标题</h4>
          <el-input value=""></el-input>
        </div>
        <div class="inputdiv icons">
          <h4>标签</h4>
          <el-input></el-input>
        </div>

        <div class="inputdiv" style="height: 200px; width: 98%">
          <h4>问题描述</h4>
          <textarea cols="60" rows="10" style="width: 100%"></textarea>
        </div>
      </div>

      <div class="rtf">
        <h4 style="margin-bottom: 20px">解决方案</h4>
        <div id="toolbar-container"></div>
        <div id="editor-container"></div>
      </div>
      <div class="soleFn">
        <el-button
          style="background-color: #208adb; color: #fff; margin-left: 1%"
          @click="saveEmerson"
          >保存</el-button
        >
        <el-button @click="cancelEmerson">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import "@wangeditor/editor/dist/css/style.css";
import {
  createEditor,
  createToolbar,
  IEditorConfig,
  IDomEditor,
} from "@wangeditor/editor";

export default {
  data() {
    return {
      addData: [],
      //时间

      //上传文件
    };
  },

  mounted() {
    //富文本方法调用
    this.editor();
  },
  methods: {
    //返回
    goEmerson() {
      this.$router.push("/emerson");
    },
    //保存判断input是否为空弹出提示/发起请求
    saveEmerson() {},
    //取消清空input并返回
    cancelEmerson() {
      this.$router.push("/emerson");
    },
    //富文本方法
    editor() {
      //【注意】下面使用的 typescript 语法。如用 javascript 语法，把类型去掉即可。

      const editorConfig = {};
      editorConfig.placeholder = "请输入内容";
      editorConfig.onChange = (editor) => {
        // 当编辑器选区、内容变化时，即触发
        // console.log("content", editor.children);
        // console.log("html", editor.getHtml());
      };

      // 创建编辑器
      const editor = createEditor({
        selector: "#editor-container",
        config: editorConfig,
        mode: "default", // 或 'simple' 参考下文
      });
      // 创建工具栏
      const toolbar = createToolbar({
        editor,
        selector: "#toolbar-container",
        mode: "default", // 或 'simple' 参考下文
      });
    },
  },
};
</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}
.inputcontent {
  width: 100%;
  border: 1px solid black;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

  .el-select {
    height: 80px;
    width: 100%;
  }
  .inputdiv {
    height: 80px;
    width: 48%;
  }
}

.NewDiv {
  margin: 0 auto;
  width: 98%;
  border: 1px solid red;
  //分割线
  hr {
    width: 98%;
    border: 2px solid #6c7b8b;
    margin: 30px auto;
    box-sizing: border-box;
  }
  .demo-form-inline {
    .el-form-item {
      .el-select {
        width: 90%;
        padding: 0px 10px;
      }
      h4 {
        width: 90%;
        display: block;
        text-align: left;
        padding-left: 12px;
      }
      .el-input {
        width: 1000px;
        padding: 0px 10px;
      }
    }
  }
  .Returns {
    border: 1px solid red;
    width: 100%;
    height: 50px;
    .el-button {
      padding: 10px;
      background-color: #6c7b8b;
      color: #fff;
      font-weight: bold;
      float: left;
      margin: 6px;
      margin-left: 20px;
    }
  }
}
//富文本
.rtf {
  width: 98%;
  margin: 0 auto;
  margin-top: 30px;
  #toolbar-container {
    width: 100%;
    border: 1px solid #cccccc;
  }
  #editor-container {
    width: 100%;
    height: 500px;
    border: 1px solid #cccccc;
  }
}
//取消保存
.soleFn {
  margin: 0 auto;
  margin-top: 50px;
  width: 100%;
  height: 80px;
  border: 1px #f4f4f4 solid;
  // border: 1px solid red;
  line-height: 80px;
  //   padding-left: 20px;
  box-sizing: border-box;
  .el-button {
    padding: 15px;
  }
}
</style>